<template>
	<view>
		<view class="filter-wrapper">
			<!-- 地区 -->
			<view class="filter-item flex-y-center"  @tap="showFilter('areas')">
				<text class="ellipsis" :style="{color: currentShow === 'areas' ? '#FE5A13' : '#333'}">{{areaText || '地区'}}</text>
				<view :class="{rotate: currentShow === 'areas'}">
					<u-icon name="arrow-down-fill" :color="currentShow === 'areas' ? '#FE5A13' : '#606266'"
						size="20"></u-icon>
				</view>
			</view>
			<!-- 类别 -->
			<view class="filter-item flex-y-center"  @tap="showFilter('category')" v-if="showCategory">
				<text class="ellipsis" :style="{color: currentShow === 'category' ? '#FE5A13' : '#333'}">{{categoryText || '类别'}}</text>
				<view :class="{rotate: currentShow === 'category'}">
					<u-icon name="arrow-down-fill" :color="currentShow === 'category' ? '#FE5A13' : '#606266'"
						size="20"></u-icon>
				</view>
			</view>
			<view class="filter-item flex-y-center"  @tap="showFilter('price')" v-if="showPrice">
				<text class="ellipsis" :style="{color: currentShow === 'price' ? '#FE5A13' : '#333'}">{{priceText || '价格'}}</text>
				<view :class="{rotate: currentShow === 'price'}">
					<u-icon name="arrow-down-fill" :color="currentShow === 'price' ? '#FE5A13' : '#606266'"
						size="20"></u-icon>
				</view>
			</view>
			<view class="filter-item flex-y-center" @tap="clearAllResult">
				<text :style="{color: currentShow === 'default' ? '#FE5A13' : '#333'}">默认</text>
			</view>
		</view>

		<u-popup mode="top" :safeAreaInsetBottom="false" :show="showPopup" :zIndex="2"
			@close="hideFilter"
			:customStyle="{top: offsetTop + 'px', zIndex: 2}" :overlayStyle="{top:  offsetTop + 'px', zIndex: 1}">

			<view class="popup-content" v-if="currentShow === 'areas'">
				<scroll-view :scroll-y="true" class="area-column">
					<view :class="{active: areaResult.province.index === index}" @tap="provinceClick(item, index)"
						class="area-item" v-for="(item, index) in provinceArr" :key="item.id">{{item.label}}</view>
				</scroll-view>
				<scroll-view :scroll-y="true" class="area-column">
					<view :class="{active: areaResult.city.index === index}" class="area-item" @tap="cityClick(item, index)"
						v-for="(item, index) in cityArr"  :key="item.id">{{item.label}}</view>
				</scroll-view>
				<scroll-view :scroll-y="true" class="area-column">
					<view :class="{active: areaResult.area.index === index}" class="area-item"  @tap="areaClick(item, index)"
						v-for="(item, index) in areaArr"  :key="item.id">{{item.label}}</view>
				</scroll-view>
			</view>
			
			<view class="popup-content" v-if="currentShow === 'category'">
				<scroll-view :scroll-y="true" class="area-column">
					<view :class="{active: categoryResult.category1.index === index}" @tap="categoryClick(1, item, index)"
						class="area-item" v-for="(item, index) in category1Arr"  :key="item.id">{{item.label}}</view>
				</scroll-view>
				<scroll-view :scroll-y="true" class="area-column">
					<view :class="{active: categoryResult.category2.index === index}" class="area-item" @tap="categoryClick(2, item, index)"
						v-for="(item, index) in category2Arr"  :key="item.id">{{item.label}}</view>
				</scroll-view>
				<scroll-view :scroll-y="true" class="area-column">
					<view :class="{active: categoryResult.category3.index === index}" class="area-item"  @tap="categoryClick(3, item, index)"
						v-for="(item, index) in category3Arr"  :key="item.id">{{item.label}}</view>
				</scroll-view>
				<scroll-view :scroll-y="true" class="area-column">
					<view :class="{active: categoryResult.category4.index === index}" class="area-item"  @tap="categoryClick(4, item, index)"
						v-for="(item, index) in category4Arr"  :key="item.id">{{item.label}}</view>
				</scroll-view>
			</view>
			
			<view class="popup-content" v-if="currentShow === 'price'">
				<view class="price-wrapper">
					<input type="digit"  v-model="priceResult.min" placeholder="最低价" />
					<view style="padding: 0 20rpx;">
						-
					</view>
					<input type="digit"   v-model="priceResult.max"  placeholder="最高价" />
				</view>
			</view>
			
			<view class="bottom-btns">
				<view class="cancel-btn" @tap="reset(false)">重置</view>
				<view class="submit-btn" @tap="confirm">确定</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { toast } from '../../utils/uni-api';
import { getCity } from '@/api/common.js'
	import { getCategory } from '@/api/product.js'
	
	export default {
		name: "FilterSelect",
		props:{
			showPrice:{
				default: true
			},
			showCategory:{
				default: true
			}
		},
		data() {
			return {
				offsetTop: 0,
				currentShow: '',
				showPopup: false,
				
				areaResult: {
					province: {
						index: -1,
						value: ''
					},
					city: {
						index: -1,
						value: ''
					},
					area:{
						index: -1,
						value: ''
					}
				},
				provinceArr: [],
				cityArr: [],
				areaArr: [],
				
				categoryResult:{
					category1:{
						index: -1,
						value: ''
					},
					category2:{
						index: -1,
						value: ''
					},
					category3:{
						index: -1,
						value: ''
					},
					category4:{
						index: -1,
						value: ''
					}
				},
				category1Arr:[],
				category2Arr:[],
				category3Arr:[],
				category4Arr:[],
				priceResult: {
					min: '',
					max: ''
				},
				priceText: '',
				categoryList: []
			};
		},
		created() {
			uni.createSelectorQuery().in(this).select('.filter-wrapper').boundingClientRect(data => {
				this.offsetTop = data.top + data.height
			}).exec()
			this.initCity()
			this.getCategory()
		},
		computed:{
			areaText(){
				let str = '';
				if(this.areaResult.area.value){
					str = this.areaArr[this.areaResult.area.index].label
				}
				else if(this.areaResult.city.value){
					str = this.cityArr[this.areaResult.city.index].label
				}
				else if(this.areaResult.province.value){
					str = this.provinceArr[this.areaResult.province.index].label
				}
				return str
			},
			categoryText(){
				let str = '';
				if(this.categoryResult.category4.value){
					str = this.category4Arr[this.categoryResult.category4.index].label
				}
				else if(this.categoryResult.category3.value){
					str = this.category3Arr[this.categoryResult.category3.index].label
				}
				else if(this.categoryResult.category2.value){
					str = this.category2Arr[this.categoryResult.category2.index].label
				}
				else if(this.categoryResult.category1.value){
					str = this.category1Arr[this.categoryResult.category1.index].label
				}
				return str
			}
			
		},
		methods: {
			async initCity(){
				const provice = await getCity({level:2, p_code: ''});
				this.provinceArr = this.formatData(provice.result);
			},
			formatData(list){
				return list.map(item => ({label: item.disName, id: item.code, level: item.level}))
			},
			async provinceClick(item, index){
				this.areaResult.province.index = index
				const city = await getCity({level: 3, p_code: item.id});
				this.cityArr = this.formatData(city.result)
				this.areaArr = []
				this.areaResult.city.index = -1
				this.areaResult.area.index = -1
				this.areaResult.city.value = ''
				this.areaResult.area.value = ''
			},
			async cityClick(item, index){
				this.areaResult.city.index = index
				const area = await getCity({level: 4, p_code: item.id});
				this.areaArr = this.formatData(area.result)
				this.areaResult.area.index = -1
				this.areaResult.area.value = ''
			},
			areaClick(item, index){
				this.areaResult.area.index = index
			},
			getCategory(){
				getCategory().then(res => {
					this.categoryList =  this.formatCategory(res.result);
					// 一级分类
					this.category1Arr = this.categoryList.map(item => ({label: item.label, id: item.id, children: item.children}))
				})
			},
			formatCategory(data){
				data.forEach(item => {
					item.label = item.categoryTitle
					if(item.children){
						this.formatCategory(item.children)
					}
				})
				return data;
			},
			categoryClick(level, item, index){
				this.categoryResult['category' + level].index = index
				for(var i = level + 1; i < 5; i++){
					this.categoryResult['category' + i] = {
						index: -1,
						value: ''
					}
					this['category'+ i + 'Arr'] = []
				}
				if(level == 1){
					this.category2Arr = this.category1Arr.find(cate => cate.id === item.id).children
					console.log(this.cate);
				}else if(level == 2){
					this.category3Arr = this.category2Arr.find(cate => cate.id === item.id).children
				}else if(level == 3){
					this.category4Arr = this.category3Arr.find(cate => cate.id === item.id).children
				}
			},
			showFilter(type) {
				if(this.currentShow == type){
					this.hideFilter()
				}else{
					this.currentShow = type
					this.showPopup = true
				}
			},
			hideFilter(){
				this.currentShow = ''
				this.showPopup = false
			},
			clearAllResult(){
				this.reset(true)
				this.currentShow = 'default'
			},
			reset(isClear){
				console.log(isClear);
				if(this.currentShow === 'areas' || isClear){
					this.areaResult.province.index = -1
					this.areaResult.city.index = -1
					this.areaResult.area.index = -1
					this.areaResult.province.value = ''
					this.areaResult.city.value = ''
					this.areaResult.area.value = ''
					this.cityArr = []
					this.areaArr = []
				}
				if(this.currentShow === 'category' || isClear){
					this.categoryResult.category1.index = -1
					this.categoryResult.category2.index = -1
					this.categoryResult.category3.index = -1
					this.categoryResult.category4.index = -1
					this.categoryResult.category1.value = ''
					this.categoryResult.category2.value = ''
					this.categoryResult.category3.value = ''
					this.categoryResult.category4.value = ''
					this.category2Arr = []
					this.category3Arr = []
					this.category4Arr = []
				}
				if(this.currentShow === 'price' || isClear){
					this.priceResult.min = ''
					this.priceResult.max = ''
					this.priceText = ''
				}
				
				this.$emit('search', {
					areaInfo: this.areaResult, 
					categoryInfo: this.categoryResult,
					priceInfo: this.priceResult
				})
				this.hideFilter()
			},
			confirm(){
				if(this.currentShow === 'areas'){
					this.areaResult.province.value = this.areaResult.province.index != -1 ? this.provinceArr[this.areaResult.province.index].id : ''
					this.areaResult.city.value = this.areaResult.city.index != -1 ? this.cityArr[this.areaResult.city.index].id : ''
					this.areaResult.area.value = this.areaResult.area.index != -1 ? this.areaArr[this.areaResult.area.index].id : ''
				}
				else if(this.currentShow === 'category'){
					if(this.categoryResult.category4.index < 0) {
						return toast('请选择最后一级分类')
					}
					this.categoryResult.category1.value = this.categoryResult.category1.index != -1 ? this.category1Arr[this.categoryResult.category1.index].id : ''
					this.categoryResult.category2.value = this.categoryResult.category2.index != -1 ? this.category2Arr[this.categoryResult.category2.index].id : ''
					this.categoryResult.category3.value = this.categoryResult.category3.index != -1 ? this.category3Arr[this.categoryResult.category3.index].id : ''
					this.categoryResult.category4.value = this.categoryResult.category4.index != -1 ? this.category4Arr[this.categoryResult.category4.index].id : ''
				}
				else if(this.currentShow === 'price'){
					if(!this.priceResult.min && !this.priceResult.max){
						this.priceText = ''
					}else{
						this.priceText = (this.priceResult.min || 0) + '~' + (this.priceResult.max || '无限')
					}
					
				}
				
				this.$emit('search', {
					areaInfo: this.areaResult, 
					categoryInfo: this.categoryResult,
					priceInfo: this.priceResult
				})
				this.hideFilter()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.filter-wrapper {
		position: relative;
		z-index: 3;
		display: flex;
		background-color: #fff;
		border-bottom: 1rpx solid #e8e8e8;

		.filter-item {
			display: flex;
			justify-content: center;
			padding: 0rpx 0 30rpx;
			font-size: 29rpx;
			color: #333333;
			flex: 1;

			text{
				max-width: 140rpx;
			}

			image {
				width: 16rpx;
				height: 10rpx;
				margin-left: 10rpx;
			}
		}

		.rotate {
			transform: rotate(180deg);
			transition: .3s;
		}

	}


	.popup-content {
		display: flex;
		width: 100%;
		background-color: #fff;
		


		.area-column {
			flex: 1;
			height: 500rpx;

			.area-item {
				padding-top: 30rpx;
				padding-left: 20rpx;
				font-size: 29rpx;
				color: #666666;
				flex-shrink: 0;
			}

			.area-item:last-child {
				padding-bottom: 30rpx;
			}
			
			.active {
				color: #333333;
				font-weight: bold;
				// background: #F6F6F6;
			}
		}

		.area-column:last-child {
			border-right: 0;
		}
	}
	
	.price-wrapper{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 200rpx;
		margin-top: 40rpx;
		
		input{
			width: 308rpx;
			height: 72rpx;
			background: #F2F2F2;
			border-radius: 2rpx;
			font-size: 30rpx;
			text-align: center;
		}
	}
	
	.bottom-btns{
		display: flex;
		margin: 30rpx;
		
		.cancel-btn{
			margin-right: 30rpx;
			background-color: #FEA413;
		}
		
		.cancel-btn, .submit-btn{
			font-size: 30rpx;
			color: #fff;
		}
		
	}
</style>